<template>
  <div class="form-designer">
    <div class="designer-header">
      <div class="header-left">
        <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon>
        <span class="title">{{ formData.name || '未命名表单' }}</span>
        <el-tag v-if="!isSaved" type="warning" size="small">未保存</el-tag>
      </div>
      <div class="header-actions">
        <el-button @click="handlePreview">
          <el-icon><View /></el-icon>
          预览
        </el-button>
        <el-button @click="showAIDialog = true" type="primary">
          <el-icon><MagicStick /></el-icon>
          AI助手
        </el-button>
        <el-button type="success" @click="handleSave">
          <el-icon><Select /></el-icon>
          保存
        </el-button>
        <el-button @click="handlePublish">
          <el-icon><Promotion /></el-icon>
          发布
        </el-button>
      </div>
    </div>

    <div class="designer-body">
      <!-- 左侧组件面板 -->
      <div class="component-panel">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基础组件" name="basic">
            <div class="component-list">
              <div 
                v-for="component in basicComponents" 
                :key="component.type"
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart(component)"
              >
                <el-icon>
                  <component :is="component.icon" />
                </el-icon>
                <span>{{ component.label }}</span>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="高级组件" name="advanced">
            <div class="component-list">
              <div 
                v-for="component in advancedComponents" 
                :key="component.type"
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart(component)"
              >
                <el-icon>
                  <component :is="component.icon" />
                </el-icon>
                <span>{{ component.label }}</span>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="布局组件" name="layout">
            <div class="component-list">
              <div 
                v-for="component in layoutComponents" 
                :key="component.type"
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart(component)"
              >
                <el-icon>
                  <component :is="component.icon" />
                </el-icon>
                <span>{{ component.label }}</span>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="业务组件" name="business">
            <div class="component-list">
              <div 
                v-for="component in businessComponents" 
                :key="component.type"
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart(component)"
              >
                <el-icon>
                  <component :is="component.icon" />
                </el-icon>
                <span>{{ component.label }}</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <div class="component-shortcuts">
          <el-divider />
          <div class="shortcuts-title">
            <el-icon><InfoFilled /></el-icon>
            快捷键
          </div>
          <div class="shortcuts-list">
            <div class="shortcut-item">Ctrl+Z：撤销</div>
            <div class="shortcut-item">Ctrl+Y：重做</div>
            <div class="shortcut-item">Ctrl+C：复制</div>
            <div class="shortcut-item">Del：删除</div>
          </div>
        </div>
      </div>

      <!-- 中间画布区域 -->
      <div class="canvas-panel">
        <div class="canvas-toolbar">
          <el-button-group>
            <el-button :type="deviceMode === 'pc' ? 'primary' : ''" @click="deviceMode = 'pc'">
              <el-icon><Monitor /></el-icon>
              PC
            </el-button>
            <el-button :type="deviceMode === 'tablet' ? 'primary' : ''" @click="deviceMode = 'tablet'">
              <el-icon><Iphone /></el-icon>
              平板
            </el-button>
            <el-button :type="deviceMode === 'mobile' ? 'primary' : ''" @click="deviceMode = 'mobile'">
              <el-icon><Cellphone /></el-icon>
              手机
            </el-button>
          </el-button-group>
          
          <div class="canvas-actions">
            <el-button @click="handleClear">
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
            <el-button @click="handleUndo" :disabled="!canUndo">
              <el-icon><RefreshLeft /></el-icon>
              撤销
            </el-button>
            <el-button @click="handleRedo" :disabled="!canRedo">
              <el-icon><RefreshRight /></el-icon>
              重做
            </el-button>
          </div>
        </div>

        <div class="canvas-container" :class="`device-${deviceMode}`">
          <div 
            class="canvas-content"
            @drop="handleDrop"
            @dragover.prevent
          >
            <el-empty v-if="formComponents.length === 0" description="拖拽左侧组件到此处开始设计表单">
              <el-button type="primary" @click="showAIDialog = true">
                <el-icon><MagicStick /></el-icon>
                使用AI快速生成
              </el-button>
            </el-empty>

            <div 
              v-for="(component, index) in formComponents" 
              :key="component.id"
              class="form-item"
              :class="{ active: selectedComponentId === component.id }"
              @click.stop="selectComponent(component.id)"
            >
              <div class="component-wrapper">
                <component 
                  :is="getComponentTag(component.type)"
                  v-bind="component.props"
                  :placeholder="component.placeholder"
                >
                  {{ component.label }}
                </component>
              </div>
              
              <div class="component-actions">
                <el-button-group>
                  <el-button size="small" @click.stop="moveUp(index)" :disabled="index === 0">
                    <el-icon><Top /></el-icon>
                  </el-button>
                  <el-button size="small" @click.stop="moveDown(index)" :disabled="index === formComponents.length - 1">
                    <el-icon><Bottom /></el-icon>
                  </el-button>
                  <el-button size="small" @click.stop="copyComponent(index)">
                    <el-icon><DocumentCopy /></el-icon>
                  </el-button>
                  <el-button size="small" type="danger" @click.stop="deleteComponent(index)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧属性面板 -->
      <div class="property-panel">
        <el-tabs v-model="propertyTab">
          <el-tab-pane label="组件属性" name="component">
            <div v-if="selectedComponent" class="property-form">
              <el-form label-width="80px" size="small">
                <el-form-item label="字段名">
                  <el-input v-model="selectedComponent.field" placeholder="请输入字段名" />
                </el-form-item>
                <el-form-item label="标签">
                  <el-input v-model="selectedComponent.label" placeholder="请输入标签" />
                </el-form-item>
                <el-form-item label="占位符">
                  <el-input v-model="selectedComponent.placeholder" placeholder="请输入占位符" />
                </el-form-item>
                <el-form-item label="默认值">
                  <el-input v-model="selectedComponent.defaultValue" placeholder="请输入默认值" />
                </el-form-item>
                <el-form-item label="必填">
                  <el-switch v-model="selectedComponent.required" />
                </el-form-item>
                <el-form-item label="禁用">
                  <el-switch v-model="selectedComponent.disabled" />
                </el-form-item>
                <el-form-item label="隐藏">
                  <el-switch v-model="selectedComponent.hidden" />
                </el-form-item>

                <!-- 特定组件的属性 -->
                <template v-if="selectedComponent.type === 'select'">
                  <el-form-item label="选项配置">
                    <el-button size="small" @click="showOptionsEditor = true">编辑选项</el-button>
                  </el-form-item>
                </template>

                <template v-if="selectedComponent.type === 'number'">
                  <el-form-item label="最小值">
                    <el-input-number v-model="selectedComponent.min" />
                  </el-form-item>
                  <el-form-item label="最大值">
                    <el-input-number v-model="selectedComponent.max" />
                  </el-form-item>
                </template>

                <el-form-item label="校验规则">
                  <el-button size="small" @click="showValidationEditor = true">配置校验</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-empty v-else description="请选择一个组件" />
          </el-tab-pane>

          <el-tab-pane label="表单属性" name="form">
            <div class="property-form">
              <el-form label-width="80px" size="small">
                <el-form-item label="表单名称">
                  <el-input v-model="formData.name" placeholder="请输入表单名称" />
                </el-form-item>
                <el-form-item label="表单描述">
                  <el-input v-model="formData.description" type="textarea" :rows="3" />
                </el-form-item>
                <el-form-item label="标签宽度">
                  <el-input-number v-model="formData.labelWidth" :min="60" :max="200" />
                </el-form-item>
                <el-form-item label="表单宽度">
                  <el-select v-model="formData.width">
                    <el-option label="100%" value="100%" />
                    <el-option label="80%" value="80%" />
                    <el-option label="600px" value="600px" />
                    <el-option label="800px" value="800px" />
                  </el-select>
                </el-form-item>
                <el-form-item label="显示标签">
                  <el-switch v-model="formData.showLabel" />
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- AI助手对话框 -->
    <el-dialog
      v-model="showAIDialog"
      title="AI表单助手"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="ai-dialog">
        <el-alert 
          title="AI助手可以帮你快速生成表单"
          type="info"
          :closable="false"
          style="margin-bottom: 20px"
        >
          <template #default>
            <div>示例：请帮我创建一个员工信息表单，包含姓名、工号、部门、职位、入职日期等字段</div>
          </template>
        </el-alert>

        <div class="ai-chat-container">
          <div class="ai-messages">
            <div v-for="(msg, index) in aiMessages" :key="index" class="ai-message" :class="msg.role">
              <div class="message-content">
                <el-icon v-if="msg.role === 'assistant'"><MagicStick /></el-icon>
                <el-icon v-else><User /></el-icon>
                <div class="message-text">{{ msg.content }}</div>
              </div>
            </div>
            <div v-if="aiGenerating" class="ai-message assistant">
              <div class="message-content">
                <el-icon class="rotating"><Loading /></el-icon>
                <div class="message-text">AI正在思考...</div>
              </div>
            </div>
          </div>

          <div class="ai-input">
            <el-input
              v-model="aiInput"
              type="textarea"
              :rows="3"
              placeholder="描述你想创建的表单..."
              @keydown.ctrl.enter="handleAIGenerate"
            />
            <div class="ai-actions">
              <el-button @click="clearAIChat">清空</el-button>
              <el-button type="primary" @click="handleAIGenerate" :loading="aiGenerating">
                <el-icon><MagicStick /></el-icon>
                生成表单
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="showPreview"
      title="表单预览"
      width="800px"
    >
      <div class="form-preview">
        <el-form :label-width="formData.labelWidth + 'px'">
          <el-form-item 
            v-for="component in formComponents"
            :key="component.id"
            :label="formData.showLabel ? component.label : ''"
            :required="component.required"
          >
            <component 
              :is="getComponentTag(component.type)"
              v-bind="component.props"
              :placeholder="component.placeholder"
              :disabled="component.disabled"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowLeft, View, MagicStick, Select, Promotion, Monitor, Iphone, 
  Cellphone, Delete, RefreshLeft, RefreshRight, Top, Bottom, 
  DocumentCopy, User, Loading, InfoFilled
} from '@element-plus/icons-vue'

// 状态管理
const activeTab = ref('basic')
const propertyTab = ref('component')
const deviceMode = ref('pc')
const isSaved = ref(true)
const selectedComponentId = ref(null)
const showAIDialog = ref(false)
const showPreview = ref(false)
const showOptionsEditor = ref(false)
const showValidationEditor = ref(false)

// AI助手
const aiInput = ref('')
const aiGenerating = ref(false)
const aiMessages = ref([
  {
    role: 'assistant',
    content: '你好！我是AI表单助手。请告诉我你想创建什么样的表单，我会帮你快速生成。'
  }
])

// 表单数据
const formData = reactive({
  name: '新建表单',
  description: '',
  labelWidth: 100,
  width: '100%',
  showLabel: true
})

// 表单组件列表
const formComponents = ref([])

// 历史记录
const history = ref([])
const historyIndex = ref(-1)

const canUndo = computed(() => historyIndex.value > 0)
const canRedo = computed(() => historyIndex.value < history.value.length - 1)

// 选中的组件
const selectedComponent = computed(() => {
  return formComponents.value.find(c => c.id === selectedComponentId.value)
})

// 基础组件配置
const basicComponents = [
  { type: 'input', label: '单行文本', icon: 'Edit' },
  { type: 'textarea', label: '多行文本', icon: 'Document' },
  { type: 'number', label: '数字输入', icon: 'List' },
  { type: 'select', label: '下拉选择', icon: 'ArrowDown' },
  { type: 'radio', label: '单选框', icon: 'CircleCheck' },
  { type: 'checkbox', label: '多选框', icon: 'Check' },
  { type: 'date', label: '日期选择', icon: 'Calendar' },
  { type: 'time', label: '时间选择', icon: 'Clock' },
  { type: 'switch', label: '开关', icon: 'SwitchButton' },
  { type: 'slider', label: '滑块', icon: 'Minus' }
]

const advancedComponents = [
  { type: 'upload', label: '文件上传', icon: 'Upload' },
  { type: 'rate', label: '评分', icon: 'Star' },
  { type: 'color', label: '颜色选择', icon: 'BrushFilled' },
  { type: 'cascader', label: '级联选择', icon: 'Connection' },
  { type: 'tree-select', label: '树形选择', icon: 'Files' },
  { type: 'editor', label: '富文本', icon: 'Reading' }
]

const layoutComponents = [
  { type: 'grid', label: '栅格布局', icon: 'Grid' },
  { type: 'divider', label: '分割线', icon: 'Minus' },
  { type: 'card', label: '卡片', icon: 'Postcard' }
]

// 业务组件配置
const businessComponents = [
  { type: 'user-select', label: '用户选择器', icon: 'User' },
  { type: 'dept-select', label: '部门选择器', icon: 'OfficeBuilding' },
  { type: 'region-select', label: '地区选择器', icon: 'Location' },
  { type: 'product-select', label: '商品选择器', icon: 'Goods' },
  { type: 'customer-select', label: '客户选择器', icon: 'Briefcase' },
  { type: 'supplier-select', label: '供应商选择器', icon: 'Van' },
  { type: 'warehouse-select', label: '仓库选择器', icon: 'House' },
  { type: 'account-select', label: '账户选择器', icon: 'WalletFilled' },
  { type: 'signature', label: '电子签名', icon: 'Edit' },
  { type: 'image-crop', label: '图片裁剪', icon: 'Crop' },
  { type: 'barcode-scan', label: '条码扫描', icon: 'Barcode' },
  { type: 'qrcode-scan', label: '二维码扫描', icon: 'DataLine' }
]

// 方法
let dragComponent = null

const handleDragStart = (component) => {
  dragComponent = component
}

const handleDrop = () => {
  if (dragComponent) {
    const newComponent = {
      id: Date.now(),
      type: dragComponent.type,
      field: `field_${Date.now()}`,
      label: dragComponent.label,
      placeholder: `请输入${dragComponent.label}`,
      defaultValue: '',
      required: false,
      disabled: false,
      hidden: false,
      props: {}
    }
    
    formComponents.value.push(newComponent)
    isSaved.value = false
    saveHistory()
  }
}

const selectComponent = (id) => {
  selectedComponentId.value = id
}

const getComponentTag = (type) => {
  const tagMap = {
    input: 'el-input',
    textarea: 'el-input',
    number: 'el-input-number',
    select: 'el-select',
    radio: 'el-radio-group',
    checkbox: 'el-checkbox-group',
    date: 'el-date-picker',
    time: 'el-time-picker',
    switch: 'el-switch',
    slider: 'el-slider',
    upload: 'el-upload',
    rate: 'el-rate',
    color: 'el-color-picker',
    cascader: 'el-cascader',
    'tree-select': 'el-tree-select',
    editor: 'el-input',
    'user-select': 'el-select',
    'dept-select': 'el-tree-select',
    'region-select': 'el-cascader',
    'product-select': 'el-select',
    'customer-select': 'el-select',
    'supplier-select': 'el-select',
    'warehouse-select': 'el-select',
    'account-select': 'el-select',
    'signature': 'el-input',
    'image-crop': 'el-upload',
    'barcode-scan': 'el-input',
    'qrcode-scan': 'el-input'
  }
  return tagMap[type] || 'el-input'
}

// 复制的组件数据
let copiedComponent = null

// 快捷键处理
const handleKeydown = (e) => {
  // Ctrl+Z 撤销
  if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
    e.preventDefault()
    handleUndo()
  }
  // Ctrl+Y 或 Ctrl+Shift+Z 重做
  else if ((e.ctrlKey && e.key === 'y') || (e.ctrlKey && e.shiftKey && e.key === 'z')) {
    e.preventDefault()
    handleRedo()
  }
  // Ctrl+C 复制选中组件
  else if (e.ctrlKey && e.key === 'c' && selectedComponentId.value) {
    e.preventDefault()
    const component = formComponents.value.find(c => c.id === selectedComponentId.value)
    if (component) {
      copiedComponent = JSON.parse(JSON.stringify(component))
      ElMessage.success('已复制组件')
    }
  }
  // Ctrl+V 粘贴组件
  else if (e.ctrlKey && e.key === 'v' && copiedComponent) {
    e.preventDefault()
    const newComponent = {
      ...copiedComponent,
      id: Date.now(),
      field: `${copiedComponent.field}_${Date.now()}`
    }
    formComponents.value.push(newComponent)
    isSaved.value = false
    saveHistory()
    ElMessage.success('已粘贴组件')
  }
  // Delete 删除选中组件
  else if (e.key === 'Delete' && selectedComponentId.value) {
    e.preventDefault()
    const index = formComponents.value.findIndex(c => c.id === selectedComponentId.value)
    if (index !== -1) {
      deleteComponent(index)
      ElMessage.success('已删除组件')
    }
  }
}

// 生命周期
onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
  // 初始化历史记录
  saveHistory()
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeydown)
})

const moveUp = (index) => {
  if (index > 0) {
    const temp = formComponents.value[index]
    formComponents.value[index] = formComponents.value[index - 1]
    formComponents.value[index - 1] = temp
    isSaved.value = false
    saveHistory()
  }
}

const moveDown = (index) => {
  if (index < formComponents.value.length - 1) {
    const temp = formComponents.value[index]
    formComponents.value[index] = formComponents.value[index + 1]
    formComponents.value[index + 1] = temp
    isSaved.value = false
    saveHistory()
  }
}

const copyComponent = (index) => {
  const component = formComponents.value[index]
  const newComponent = {
    ...component,
    id: Date.now(),
    field: `${component.field}_copy`
  }
  formComponents.value.splice(index + 1, 0, newComponent)
  isSaved.value = false
  saveHistory()
}

const deleteComponent = (index) => {
  formComponents.value.splice(index, 1)
  selectedComponentId.value = null
  isSaved.value = false
  saveHistory()
}

const handleClear = () => {
  ElMessageBox.confirm('确定要清空所有组件吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    formComponents.value = []
    selectedComponentId.value = null
    isSaved.value = false
    saveHistory()
    ElMessage.success('已清空')
  })
}

const saveHistory = () => {
  history.value = history.value.slice(0, historyIndex.value + 1)
  history.value.push(JSON.parse(JSON.stringify(formComponents.value)))
  historyIndex.value = history.value.length - 1
}

const handleUndo = () => {
  if (canUndo.value) {
    historyIndex.value--
    formComponents.value = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
  }
}

const handleRedo = () => {
  if (canRedo.value) {
    historyIndex.value++
    formComponents.value = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
  }
}

const handlePreview = () => {
  showPreview.value = true
}

const handleSave = () => {
  console.log('保存表单:', { formData, formComponents: formComponents.value })
  isSaved.value = true
  ElMessage.success('保存成功')
}

const handlePublish = () => {
  ElMessageBox.confirm('确定要发布此表单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    handleSave()
    ElMessage.success('发布成功')
  })
}

const handleBack = () => {
  if (!isSaved.value) {
    ElMessageBox.confirm('有未保存的更改，确定要离开吗？', '提示', {
      confirmButtonText: '离开',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      window.history.back()
    })
  } else {
    window.history.back()
  }
}

// AI功能
const handleAIGenerate = async () => {
  if (!aiInput.value.trim()) {
    ElMessage.warning('请输入需求描述')
    return
  }

  aiMessages.value.push({
    role: 'user',
    content: aiInput.value
  })

  aiGenerating.value = true
  const userInput = aiInput.value
  aiInput.value = ''

  // 模拟AI生成
  setTimeout(() => {
    const generatedComponents = generateFormByAI(userInput)
    
    aiMessages.value.push({
      role: 'assistant',
      content: `我已经根据你的需求生成了包含 ${generatedComponents.length} 个字段的表单。你可以在画布中查看和编辑。`
    })

    formComponents.value = generatedComponents
    isSaved.value = false
    saveHistory()
    aiGenerating.value = false
    showAIDialog.value = false
    ElMessage.success('表单生成成功')
  }, 2000)
}

const generateFormByAI = (input) => {
  // 简单的AI模拟生成逻辑
  const components = []
  let id = Date.now()

  if (input.includes('员工') || input.includes('人员')) {
    components.push(
      { id: id++, type: 'input', field: 'name', label: '姓名', placeholder: '请输入姓名', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'input', field: 'employeeNo', label: '工号', placeholder: '请输入工号', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'select', field: 'department', label: '部门', placeholder: '请选择部门', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'select', field: 'position', label: '职位', placeholder: '请选择职位', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'date', field: 'hireDate', label: '入职日期', placeholder: '请选择入职日期', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'input', field: 'phone', label: '联系电话', placeholder: '请输入联系电话', required: false, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'input', field: 'email', label: '邮箱', placeholder: '请输入邮箱', required: false, disabled: false, hidden: false, props: {} }
    )
  } else {
    // 默认生成一些通用字段
    components.push(
      { id: id++, type: 'input', field: 'title', label: '标题', placeholder: '请输入标题', required: true, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'textarea', field: 'description', label: '描述', placeholder: '请输入描述', required: false, disabled: false, hidden: false, props: {} },
      { id: id++, type: 'date', field: 'date', label: '日期', placeholder: '请选择日期', required: false, disabled: false, hidden: false, props: {} }
    )
  }

  return components
}

const clearAIChat = () => {
  aiMessages.value = [
    {
      role: 'assistant',
      content: '你好！我是AI表单助手。请告诉我你想创建什么样的表单，我会帮你快速生成。'
    }
  ]
  aiInput.value = ''
}

// 初始化
saveHistory()
</script>

<style scoped>
.form-designer {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.designer-header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.designer-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.component-panel {
  width: 260px;
  background: white;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.component-list {
  padding: 10px;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  background: #f9f9f9;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: move;
  transition: all 0.3s;
}

.component-item:hover {
  background: #409eff;
  color: white;
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.component-shortcuts {
  padding: 15px;
  background: #f9f9f9;
  border-top: 1px solid #e6e6e6;
}

.shortcuts-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 10px;
  font-size: 14px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-item {
  font-size: 12px;
  color: #909399;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
}

.canvas-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.canvas-toolbar {
  height: 50px;
  background: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.canvas-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.canvas-content {
  width: 100%;
  min-height: 500px;
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.device-tablet .canvas-content {
  max-width: 768px;
}

.device-mobile .canvas-content {
  max-width: 375px;
}

.form-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px dashed transparent;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s;
}

.form-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.form-item.active {
  border-color: #409eff;
  border-style: solid;
  background: #f0f9ff;
}

.component-actions {
  position: absolute;
  top: -15px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.form-item:hover .component-actions,
.form-item.active .component-actions {
  opacity: 1;
}

.property-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #e6e6e6;
  overflow-y: auto;
}

.property-form {
  padding: 20px;
}

.ai-dialog .ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.ai-message {
  margin-bottom: 15px;
}

.message-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ai-message.user .message-content {
  flex-direction: row-reverse;
}

.message-text {
  padding: 10px 15px;
  border-radius: 8px;
  max-width: 70%;
}

.ai-message.assistant .message-text {
  background: white;
  border: 1px solid #e6e6e6;
}

.ai-message.user .message-text {
  background: #409eff;
  color: white;
}

.ai-input {
  margin-top: 20px;
}

.ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-preview {
  padding: 20px;
}
</style>

